<template>
  <div class="PerformanceRApprovalDetail-box content-box">
    <nav-title title="绩效结果审批" :routerLink="routerLink"/>
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <div class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.emplid}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.name}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.dept}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.jodDescr}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">排名</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.ranking}}</span>
        </div>
      </div>
    </div>
    <div class="regulations-box">
      <div class="title">绩效结果</div>
      <div class="information result-box">
        <div class="info-cell clearfix" v-if="allInfo.evaType != 'B'">
          <label class="label">绩效得分</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.score}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">绩效等级</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.level}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">绩效系数</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.ratio}}</span>
        </div>
        <div class="info-cell clearfix" v-if="allInfo.evaType != 'B'">
          <label class="label">调整得分</label>
          <input class="value" style="font-size: 14px;" v-model="allInfo.scoreRevised" placeholder="请填写"/>
        </div>
        <div class="info-cell clearfix">
          <label class="label">调整等级</label>
          <!-- <input class="value" style="font-size: 14px;" v-model="allInfo.levelRevised" placeholder="请填写"/> -->
          <div class="value arrow">
            <group>
              <popup-radio placeholder="请选择" :options="allInfo.levelSelects" v-model="allInfo.levelRevised" @on-hide="getRate"/>
            </group>
          </div>
        </div>
        <div class="info-cell clearfix">
          <label class="label">调整系数</label>
          <span class="value" style="font-size: 14px;" v-model="allInfo.ratioRevised" placeholder="请填写"/>
        </div>
        <div class="info-cell clearfix">
          <label class="label">调整原因</label>
          <input class="value" style="font-size: 14px;" v-model="allInfo.comments" placeholder="请填写"/>
        </div>
      </div>
    </div>
    <button @click="save">保 存</button>
  </div>
</template>

<script>
import { getPerresultapproveInfo, getPerresultapproveRate, perresultapproveSaveResult } from "../../api/api";
import { XTextarea, Group, PopupRadio } from 'vux';
import qs from 'qs';

export default {
  name: "PerformanceRApprovalDetail",
  components: {
    XTextarea,
    Group,
    PopupRadio
  },
  created() {
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.docid = this.$route.query.docid;
    this.version = this.$route.query.version;
    this.seqnbr = this.$route.query.seqnbr;
    this.epPhase = this.$route.query.epPhase;
    this.wfType = this.$route.query.wfType;
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      routerLink: '',
      allInfo: {
        // time: '2018年04月',
        // tpl: '控股集团总部员工PPI考核模板',
        // rankingGulp: '人力资源中心S级员工',
        // score: '95',
        // ranking: '1/2',
        // grade: 'P7',
        // coefficient: '0.7',
        levelSelects: []
      },
    };
  },
  methods: {
    getData() {
      this.$vux.loading.show();
      let params = {
        cTransactionNbr: this.cTransactionNbr,
        docid: this.docid,
        version: this.version,
        seqnbr: this.seqnbr,
        epPhase: this.epPhase,
        wfType: this.wfType,
      };
      getPerresultapproveInfo(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    getRate() {
      this.$vux.loading.show();
      let params = {
        evaModel: this.allInfo.evaModel,
        levelRevised: this.allInfo.levelRevised
      };
      getPerresultapproveRate(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo.ratioRevised = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    save() {
      this.$vux.loading.show();
      let params = {
        docid: this.docid,
        version: this.version,
        scoreRevised: this.allInfo.scoreRevised,
        levelRevised: this.allInfo.levelRevised,
        ratioRevised: this.allInfo.ratioRevised,
        comments: this.allInfo.comments,
      };
      perresultapproveSaveResult(qs.stringify(params))
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.$vux.alert.show({
              title: "成功",
              content: "保存成功",
              onHide:()=>{
                this.$router.go(-1);
              }
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
  }
};
</script>

<style type="text/scss" lang="scss">
@import '../../styles/staff.scss';
  .PerformanceRApprovalDetail-box{
    >button{
      width: 90%;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      font-size: 18px;
      color: #fff;
      outline: none;
      margin-bottom: 50px;
      background-color: rgba(28, 170, 254, 1);
      font-weight: bold;
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.349019607843137);
      margin-top: 10px;
    }
    .result-box{
      padding: 10px;
      >div{
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
      }
    }
    .arrow.value {
      .weui-cells, .weui-cell {
        width: 100%;
        height: 32px;
      }
      .weui-cell__ft {
        position: relative;
        width: 100%;
        text-align: left;
        &::after {
          content: none;
        }
        &::before {
          content: "";
          position: absolute;
          width: 20px;
          height: 8px;
          background: url("../vacation/images/u183.png") 0 0 no-repeat;
          top: 8px;
          right: 20px;
          background-size: 20px 8px;
        }
      }
    }
  }
</style>
